{% extends "base.html" %} {% block content %}
<div>
    {{ section.content | safe }}

    <div style="margin-top: var(--medium); margin-bottom: var(--medium)">
        <div
            style="
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: var(--medium);
            "
        >
            <div style="position: relative; flex: 1; min-width: 15rem">
                <svg
                    style="
                        position: absolute;
                        left: 0.5rem;
                        top: 23%;
                        pointer-events: none;
                        fill: none;
                        stroke: var(--text);
                        stroke-width: 0.175rem;
                        width: 17px;
                        height: 17px;
                    "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="-2 -2 35 35"
                >
                    <circle cx="14.49" cy="14.49" r="13.99" />
                    <line x1="24.57" y1="24.21" x2="32.76" y2="33.13" />
                </svg>
                <input
                    type="text"
                    id="search-input"
                    style="width: 100%; padding-left: 2rem"
                    placeholder="Search"
                />
            </div>
            {% set all_tags = get_taxonomy(kind="tags") %}
            <div style="position: relative">
                <svg
                    style="
                        position: absolute;
                        left: 0.7rem;
                        top: 25%;
                        pointer-events: none;
                        fill: none;
                        stroke: var(--text);
                        stroke-width: 0.19rem;
                        width: 16px;
                        height: 16px;
                    "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="-2 -2 43 43"
                >
                    <polygon
                        points="38 11.75 25.5 19.25 21.75 38 15.5 30.5 13 19.25 .5 11.75 .5 .5 38 .5 38 11.75"
                    />
                </svg>
                <input
                    type="text"
                    id="tag-input"
                    style="width: 100%; max-width: 6rem; padding-left: 2rem"
                    list="available-tags"
                    placeholder="Tags"
                    autocomplete="off"
                />
            </div>
            <datalist id="available-tags">
                {% for term in all_tags.items %}
                <option value="{{ term.name }}">{{ term.name }}</option>
                {% endfor %}
            </datalist>
        </div>
        <div
            style="
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: var(--medium);
                margin-top: var(--small);
                margin-bottom: var(--large);
            "
        >
            <div id="selected-tags-container" class="post-tags"></div>
        </div>
    </div>

    <ul id="post-list" style="list-style: none; margin: 0; padding: 0">
        {% for page in section.pages %}
        <li
            style="padding: var(--large) 0"
            data-permalink="{{ page.permalink }}"
            data-tags="{% if page.taxonomies.tags %}{{ page.taxonomies.tags | join(sep=',') }}{% endif %}"
        >
            <div
                style="
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: var(--small) var(--medium);
                "
            >
                <h2
                    style="
                        margin-top: 0;
                        margin-bottom: var(--small);
                        flex: 1 1 16rem;
                    "
                >
                    <a href="{{ page.permalink }}"
                        >{{ page.title | replace(from="- ", to="") }}</a
                    >
                </h2>
                <span class="post-date" style="margin-left: auto"
                    >{{ page.date | date(format="%d-%m-%y") }}</span
                >
            </div>
            <span class="post-summary"> {{ page.summary | safe }} </span>
            <div class="post-tags">
                {% for tag in page.taxonomies.tags %}
                <span
                    class="tag"
                    style="cursor: pointer"
                    onclick="handleAddTag('{{ tag }}')"
                    >{{ tag }}</span
                >
                {% endfor %}
            </div>
            {% if not loop.last %}
            <hr style="margin-top: var(--xlarge); margin-bottom: 0" />
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>

<script src="fuse.js"></script>
<script>
    let selectedTags = [];
    let originalTags = [];
    let postItems, fuse, triggerSearch, renderSelectedTags;

    function updateDatalist() {
        const datalist = document.getElementById("available-tags");
        datalist.innerHTML = "";
        // Ensure selected tags are not in the datalist and maintain original tags
        originalTags.forEach(function (tag) {
            if (!selectedTags.includes(tag)) {
                const option = document.createElement("option");
                option.value = tag;
                option.textContent = tag;
                datalist.appendChild(option);
            }
        });
    }

    function handleAddTag(val) {
        if (val && !selectedTags.includes(val) && originalTags.includes(val)) {
            selectedTags.push(val);
            updateDatalist();
            renderSelectedTags();
            triggerSearch();

            const tagInput = document.getElementById("tag-input");
            if (tagInput) {
                tagInput.value = "";
                tagInput.blur();
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function () {
        // Setup Search
        const initialDatalist = document.getElementById("available-tags");
        originalTags = Array.from(initialDatalist.options).map(
            (opt) => opt.value,
        );

        postItems = Array.from(
            document.querySelectorAll("[data-permalink]"),
        ).map(function (item) {
            return {
                element: item,
                permalink: item.getAttribute("data-permalink"),
                tags: (item.getAttribute("data-tags") || "")
                    .split(",")
                    .filter(Boolean),
                title: item.querySelector("h2")?.textContent || "",
                summary: item.querySelector(".post-summary")?.textContent || "",
            };
        });

        fuse = new Fuse(postItems, {
            keys: ["title", "summary"],
            threshold: 0.3,
            ignoreLocation: true,
        });

        triggerSearch = function () {
            const searchInput = document.getElementById("search-input");
            const postList = document.getElementById("post-list");
            const query = searchInput.value.trim();

            let results = query
                ? fuse.search(query).map((r) => r.item)
                : postItems;

            const filtered = results.filter(function (post) {
                return (
                    selectedTags.length === 0 ||
                    selectedTags.every((t) => post.tags.includes(t))
                );
            });

            const visibleElements = new Set(filtered.map((p) => p.element));
            postItems.forEach(function (post) {
                post.element.style.display = visibleElements.has(post.element)
                    ? ""
                    : "none";
            });

            filtered.forEach((post) => postList.appendChild(post.element));
        };

        renderSelectedTags = function () {
            const container = document.getElementById(
                "selected-tags-container",
            );
            container.innerHTML = "";

            selectedTags.forEach(function (tag) {
                const tagEl = document.createElement("span");
                tagEl.className = "tag";
                tagEl.innerHTML =
                    tag +
                    ' <span class="remove-btn" style="cursor:pointer; margin-left:var(--medium);">&times;</span>';

                tagEl.querySelector(".remove-btn").onclick = function () {
                    selectedTags = selectedTags.filter((t) => t !== tag);
                    updateDatalist();
                    renderSelectedTags();
                    triggerSearch();
                };
                container.appendChild(tagEl);
            });
        };

        // Event Listeners
        const searchInput = document.getElementById("search-input");
        searchInput.addEventListener("input", triggerSearch);

        const tagInput = document.getElementById("tag-input");

        tagInput.addEventListener("input", function (e) {
            const val = e.target.value;

            // Reopen datalist if input is empty
            if (val === "") {
                const listId = tagInput.getAttribute("list");
                tagInput.setAttribute("list", "");
                setTimeout(() => {
                    tagInput.setAttribute("list", listId);
                    if (tagInput.showPicker) tagInput.showPicker();
                }, 1);
                return;
            }
        });

        tagInput.addEventListener("click", function () {
            if (tagInput.showPicker) tagInput.showPicker();
        });

        tagInput.addEventListener("focus", () => (tagInput.placeholder = ""));
        tagInput.addEventListener("blur", () => {
            if (!tagInput.value) tagInput.placeholder = "Tags";
        });

        // Add on click/select
        tagInput.addEventListener("input", function (e) {
            const val = this.value;

            // Differentiate selection from typing.
            // Chrome/Firefox use undefined/null, Safari uses 'insertReplacementText' for datalist clicks.
            const isSelection =
                !e.inputType || e.inputType === "insertReplacementText";

            if (isSelection && originalTags.includes(val)) {
                handleAddTag(val);
            }
        });

        // Add on single match + Enter key
        tagInput.addEventListener("keyup", function (e) {
            if (e.key === "Enter") {
                const val = this.value.trim();

                const datalist = document.getElementById("available-tags");
                const options = Array.from(datalist.options);

                // Filter options based on what is typed
                const matches = options.filter((opt) =>
                    opt.value.toLowerCase().includes(val.toLowerCase()),
                );

                if (matches.length === 1) {
                    // Exactly one item matches what was typed
                    handleAddTag(matches[0].value);
                } else {
                    // Do nothing and keep the picker open. Closes by default.
                    if (tagInput.showPicker) tagInput.showPicker();
                }
            }
        });

        // Process URL parameters
        const urlParam = new URLSearchParams(window.location.search).get("q");
        if (urlParam) handleAddTag(urlParam);
    });
</script>
{% endblock content %}